<!-- BEGIN: add -->
<script type="text/javascript">
	$(function (){
		$(".tab_content").hide(); //Hide all content
		$("ul.tabs li:first a").addClass("active").show(); //Activate first tab
		$(".tab_content:first").show(); //Show first tab content

		$('#product_info_tabs li').each(function (){
			
			$('#product_info_tabs li a').click(function (){
				$("ul.tabs li a").removeClass("active");
				$(".tab_content").hide();
				$('#'+$(this).attr('id')+'_content').css('display', '');
				$(this).addClass('active');
				return false;
			});
			
		});
		//$('.colorSelector').ColorPicker({flat: true});
	});
function upload(){
	$('#ajax-loader').show();
	$.ajaxFileUpload({
		url:'site/product/upload.php',
		fileElementId:'fileToUpload',
		dataType: 'json',
		success: function (data){
			if(data.img==true){
				//$('row-first');
				$strHtml = '<tr>'
							+'<td><img src="{baseUrl}/media/product/images/base/'+data.file+'" width="100px" height="75px" /></td>'
							+'<td><input type="text" name="product[label]['+data.imgid+']" value="" class="input-text input-text-medium"/></td>'
							+'<td><input type="text" name="product[order]['+data.imgid+']" value="" class="input-text" /></td>'
							+'<td class="a-center"><input type="radio" name="product[image]" value="'+data.imgid+'" /></td>'
							+'<td><input type="checkbox" name="product[delete][]" value="'+data.imgid+'" /><input type="hidden" name="product[idimg][]" value="'+data.imgid+'" /></td>'
						+'</tr>';
				$($strHtml).insertAfter('#row-first');
				$('#ajax-loader').hide();
			}else{
				switch (data.file){
					case 2: {alert('File quá lớn');loaded();} break;
					case 1: {alert('Không cho phép file này');loaded();} break;
					default: {
						$('#ajax-loader').hide();
					} break;
				}
			}
			return true;
		},
		error: function(){
			alert('Không thể upload file');
			$('#ajax-loader').hide();
		}
	});
}
var countColor = 0;
function insertColor(){
	countColor++;
	var strHtml = '<div id="option_'+countColor+'" class="option-box">'
				  	+'<div id="color-Selector'+countColor+'" class="colorSelector2"><div style="background-color: #00ff00"></div></div>'
					+'<input type="file" name="uploadimage'+countColor+'" id="fileToUpload'+countColor+'" onchange="uploadmulti('+countColor+')" class="file-upload"/>'
					+'<div id="row-first'+countColor+'"></div>'
					+'<a href="javascript:void(0)" onclick="delteOption('+countColor+')" class="delete-option"></a>'
					+'<input type="hidden" value="" name="colorvalue'+countColor+'" id="colorvalue'+countColor+'" />'
					+'<ul id="list-imgcolor'+countColor+'"></ul>'
				  + '<div class="clr"></div></div>';
				
	$(strHtml).insertAfter('#insert-color');
	
	$('#color-Selector'+countColor).ColorPicker({
		color: '#0000ff',
		onShow: function (colpkr) {
			$(colpkr).fadeIn(500);
			return false;
		},
		onHide: function (colpkr) {
			$(colpkr).fadeOut(500);
			return false;
		},
		onChange: function (hsb, hex, rgb) {
			$('#colorvalue'+countColor).val(hex);
			$('#color-Selector'+countColor+' div').css('backgroundColor', '#' + hex);
		}
	});
}
function delteOption(id){
	$('#option_'+id).hide();
}
var countImg = 0;
function uploadmulti(id){
	$('#ajax-loader').show();
	var colorValue = $('#colorvalue'+id).val();
	if(colorValue == ''){
		colorValue = '00FF00'
	}
	$.ajaxFileUpload({
		url:'site/product/uploadimgcolor.php?id='+id+'&color='+colorValue,
		fileElementId:'fileToUpload'+id,
		dataType: 'json',
		success: function (data){
			if(data.img==true){
				countImg++;
				$strHtml = '<div class="img-color-wrapper" id="img-color-wrapper'+countImg+'"><a href="javascript:void(0)" class="color-img-delete" onclick="deleteImgColor('+data.colorid+', '+countImg+')"></a><img src="{baseUrl}/media/product/images/color/'+data.file+'" width="100px" height="75px" title="'+data.title+'" /></div>';
				$($strHtml).insertAfter('#list-imgcolor'+id);
				$('#ajax-loader').hide();
			}else{
				switch (data.file){
					case 2: {alert('File quá lớn');loaded();} break;
					case 1: {alert('Không cho phép file này');loaded();} break;
					default: {
						$('#ajax-loader').hide();
					} break;
				}
			}
			return true;
		},
		error: function(){
			alert('Không thể upload file');
			$('#ajax-loader').hide();
		}
	});
}
function deleteImgColor(colorid, boxid){
	$.ajax({
		url	:'site/product/deletecolor.php',
		type:'POST',
		data:{colorid:""+colorid+""},
		dataType:'json',
		beforeSend:function(){
			$("#ajax-loader").show();
		},
		success:function(msg){
			$("#ajax-loader").hide();
			if(msg.msg){
				$("#img-color-wrapper"+boxid).hide();
				
			}		
		}
	});
	
}
function getProductSimilar(){
	
	$.ajax({
		url	:'site/product/productsimilar.php',
		type:'POST',
		data:{data:10},
		dataType:'json',
		beforeSend:function(){
			$("#ajax-loader").show();
		},
		success:function(msg){
			$("#ajax-loader").hide();
			if(msg.content){
				$("#product-similar").html(msg.content);	
			}		
		}
	});
}
function onSearchAjax(){
	var frm = document.frmApp;
	var category_id = frm.s_category_id.value;
	var product_name = frm.s_name.value;
	var pape = frm.page.value;
	var price_from = frm.price_from.value
	var price_to = frm.price_to.value;
	var limit = frm.limit.value;
	$.ajax({
		url	:'site/product/productsimilar.php',
		type:'POST',
		data:{category_id:""+category_id+"",product_name:""+product_name+"",pape:""+pape+"",price_from:""+price_from+"",price_to:""+price_to+"", limit:""+limit+""},
		dataType:'json',
		beforeSend:function(){
			$("#ajax-loader").show();
		},
		success:function(msg){
			$("#ajax-loader").hide();
			if(msg.content){
				$("#product-similar").html(msg.content);	
			}		
		}
	});
}
function resetFilter(){
	$.ajax({
		url	:'site/product/productsimilar.php',
		type:'POST',
		data:{category_id:'',product_name:'',pape:'',price_from:'',price_to:'', limit:''},
		dataType:'json',
		beforeSend:function(){
			$("#ajax-loader").show();
		},
		success:function(msg){
			$("#ajax-loader").hide();
			if(msg.content){
				$("#product-similar").html(msg.content);	
			}
		}
	});
}
</script>
<div id="main-left">
	<div class="menu">
		<h2>Thông tin sản phẩm</h2>
		<ul id="product_info_tabs" class="tabs">
			<li>
				<a id="product_tabs_1" class="tab-item-link active" href="#"><span>Thông tin chung</span></a>
			</li>
			<li>
				<a id="product_tabs_2" class="tab-item-link" href="#"><span>Ảnh</span></a>
			</li>
			<li>
				<a id="product_tabs_3" class="tab-item-link" href="#"><span>Mô tả</span></a>
			</li>
			<li>
				<a id="product_tabs_4" class="tab-item-link" href="#"><span>Màu sản phẩm</span></a>
			</li>
			<li>
				<a id="product_tabs_5" class="tab-item-link" href="#" onclick="getProductSimilar()"><span>Sản phẩm Similar</span></a>
			</li>
		</ul>
	</div>
</div>

<div id="content">
	<form enctype="multipart/form-data" method="post" name="frmApp">
		<div class="content-header h_title">
			<h2>Thêm sản phẩm</h2>
			<div class="content-buttons">
				<input type="submit" value="Lưu" class="button" />
			</div>
			<div class="clr"></div>
		</div>
		<div id="product_tabs_1_content" style="display:none" class="tab_content">
			<table class="form-list" cellspacing="0">
				<tbody>
					<tr>
						<td class="label">
							<label for="category_id">Danh mục<span class="required">*</span></label>
						</td>
						<td class="value">
							{sltCategory}
						</td>
					</tr>
					<tr>
						<td class="label">
							<label for="product_name">Tên sản phẩm<span class="required">*</span></label>
						</td>
						<td class="value">
							<input type="text" name="product_name" class="input-text input-text-medium" value="{productName}" />
						</td>
					</tr>
					<tr>
						<td class="label">
							<label for="price">Giá</label>
						</td>
						<td class="value">
							<input type="text" name="product_price" class="input-text input-text-medium" value="{price}" />
						</td>
					</tr>
					<tr>
						<td class="label">
							<label for="size">Size</label>
						</td>
						<td class="value">
							<input type="text" name="size" class="input-text input-text-medium" value="{size}" />
						</td>
					</tr>
					<tr>
						<td class="label">
							<label for="at_home">Hiển thị trang chủ</label>
						</td>
						<td class="value">
							<input type="checkbox" name="at_home" value="1"/>
						</td>
					</tr>
					<tr>
						<td class="label">
							<label for="at_slider">Hiển thị trong slider</label>
						</td>
						<td class="value">
							<input type="checkbox" name="at_slider" value="1" />
						</td>
					</tr>
					<tr>
						<td class="label">
							<label for="at_pronew">Hiển thị trong sản phẩm mới</label>
						</td>
						<td class="value">
							<input type="checkbox" name="at_pronew" value="1" />
						</td>
					</tr>
					<tr>
						<td class="label">
							<label for="at_prosale">Hiển thị trong Sales</label>
						</td>
						<td class="value">
							<input type="checkbox" name="at_prosale" value="1" />
						</td>
					</tr>
					<tr>
						<td class="label">
							<label for="product_special">Sản phẩm đặc biệt</label>
						</td>
						<td class="value">
							<input type="checkbox" name="product_special" value="1" />
						</td>
					</tr>
					<tr>
						<td class="label">
							<label for="product_bestseller">Sản phẩm Bestseller</label>
						</td>
						<td class="value">
							<input type="checkbox" name="product_bestseller" value="1" />
						</td>
					</tr>
				</tbody>
			</table>
			<ul class="list-error">
				{error}
			</ul>
		</div>
		<div id="product_tabs_2_content" style="display:none" class="tab_content">
			<div class="grid">
				<table id="productGrid_table" class="data" cellspacing="0">
					<thead>
						<tr class="headings">
							<th width="17%">Ảnh</th>
							<th width="44%">Tiêu đề</th>
							<th width="22%">Thứ tự</th>
							<th width="12%">Ảnh chính</th>
							<th width="5%">Xóa</th>
						</tr>
					</thead>
					<tbody>
						<tr id="row-first">
							<td>No Image</td>
							<td></td>
							<td class="a-center"></td>
							<td class="a-center"><input type="radio" name="product[image]" value="no_selection" /></td>
							<td></td>
						</tr>
                        <!-- BEGIN: listimg -->
                        <tr>
                        	
							<td><img src="{baseUrl}/{listimg.img_url}" width="100px" height="75px" /></td>
							<td><input type="text" name="product[label][{listimg.img_id}]" value="{listimg.img_label}" class="input-text input-text-medium"/></td>'
							<td><input type="text" name="product[order][{listimg.img_id}]" value="{listimg.img_order}" /></td>
							<td class="a-center"><input type="radio" name="product[image]" value="{listimg.img_id}" {listimg.basecheck} /></td>
							<td><input type="checkbox" name="product[delete][]" value="{listimg.img_id}" {listimg.chkcheck} /><input type="hidden" name="product[idimg][]" value="{listimg.img_id}" /></td>
						
                        </tr>
                        <!-- END: listimg -->
						<tr>
							<td colspan="6">
								<input type="file" name="uploadimage" id="fileToUpload" onchange="upload()"/>
							</td>
						</tr>
					</tbody>
				</table>
				
			</div>
		</div>
		<div id="product_tabs_3_content" style="display:none" class="tab_content">
			<table class="form-list" cellspacing="0">
				<tbody>
					<tr>
						<td class="label">
							<label for="parent_id">Description</label>
						</td>
						<td class="value">
							<textarea id="description" cols="10" rows="2" name="description" style="height:15em;" class="mceEditor">{description}</textarea>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div id="product_tabs_4_content" style="display:none" class="tab_content">
			<div class="content-pager" style="margin:0 0 10px 0;">
				<input type="button" value="Thêm màu" class="button" onclick="insertColor()"/>
                <div class="clr"></div>
                <div id="insert-color"></div>
                
			</div>
		</div>
		<div id="product_tabs_5_content" style="display:none" class="tab_content">
			<div class="grid" id="product-similar">
			
			</div>
		</div>
		
	</form>
</div>
<!-- END: add -->